import React, { useRef, useEffect, useState } from 'react';
import './class.less';
import * as echarts from 'echarts';
import { Button } from 'antd';
type Props = {};

const Class = (props: any) => {
  const my_line: any = useRef();
  const [num, seTnum] = useState(2);
  const btn = () => {
    seTnum(num + 1);
  };
  useEffect(() => {
    var myChart = echarts.init(my_line.current);
    var option;
    option = {
      title: {
        text: '报表统计',
      },
      xAxis: {
        type: 'category',
        data: [
          '2023-02-01',
          '2023-02-05',
          '2023-02-09',
          '2023-02-13',
          '2023-02-17',
          '2023-02-21',
          '2023-02-25',
        ],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '新增客服',
          data: [0, 0, 0, 0, 0, num, 0],
          type: 'line',
          smooth: true,
        },
      ],
    };
    option && myChart.setOption(option);
  }, [num]);

  return (
    <div className="box">
      <div className="left1">
        <div className="biao">
          <h2>数据统计</h2>
        </div>
        <div className="aa">
          <p>客服总数</p>
          <h2>7</h2>
        </div>
        <div className="bb">
          <p>当前在线客服</p>
          <h2>0</h2>
        </div>
        <div className="cc">
          <p>当前在线访客</p>
          <h2>1</h2>
        </div>
        <div className="dd">
          <p>今日会话</p>
          <h2>0</h2>
        </div>
      </div>
      <div className="left2">
        <div className="biao">
          <h2>版本信息</h2>
        </div>
        <div className="table">
          <table>
            <tr>
              <td>项目名称</td>
              <td>宏烨找房在线客服系统</td>
            </tr>
            <tr>
              <td>当前版本</td>
              <td>v1.0.1</td>
            </tr>
            <tr>
              <td>主要特色</td>
              <td>方便部署 / 快速接入</td>
            </tr>
          </table>
        </div>
        <div></div>
      </div>
      <div className="left3" ref={my_line}>
      </div>
      <Button onClick={btn}>点击增加</Button>
    </div>
  );
};

export default Class;
